<template>
<div class="body_all">
    <div class="ba_top">
        <div>
            <el-input style="width: 15%" v-model="searchList.kw" placeholder="企业名称/联系电话" size="mini"></el-input>
            <el-select v-model="searchList.level" placeholder="请选择等级" size="mini">
                <el-option v-for="item in levelList" :key="item.id" :label="item.title" :value="item.id">
                </el-option>
            </el-select>
            <el-button style="margin-left: 8px" type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
            <el-button type="refresh" icon="el-icon-refresh" @click="btnRefresh" size="mini">重置</el-button>
        </div>
        <div style="margin-top: 8px">
            <div style="float: left">
                <el-button :disabled="!(multipleSelection && multipleSelection.length !== 0)" type="danger" icon="el-icon-delete" size="mini" @click="delForm()">删除</el-button>
            </div>
            <div style="float: right">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="showEditer(0)">新增企业</el-button>
            </div>
            <!-- <el-button type="down" size="mini">模板下载</el-button>
        <el-button type="import" icon="el-icon-download" size="mini"
          >导入</el-button
        >
        <el-button type="out" icon="el-icon-upload2" size="mini"
          >导出</el-button
        >
        <el-button type="check" icon="el-icon-document-copy" size="mini"
          >查重</el-button
        > -->
        </div>
    </div>
    <div class="ba_main">
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" height="250" tooltip-effect="dark" style="width: 100%" class="ellipsis" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="企业名称" width="260" fixed>
                <template slot-scope="scope">
                    <div class="edit_btn" @click="details(scope.row)">
                        <span>{{ scope.row.name !== "" ? scope.row.name : "--" }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="联系电话" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.phone !== "" ? scope.row.phone : "--" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="350">
                <template slot-scope="scope">
                    <span v-if="scope.row.area !== '' || scope.row.address !== ''">
                        {{ scope.row.area }}{{ scope.row.address }}
                    </span>
                    <span v-else> -- </span>
                </template>
            </el-table-column>
            <el-table-column label="行业类型" width="140" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.industry !== "" ? scope.row.industry : "--"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="人员规模" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.scale !== "" ? scope.row.scale : "--" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="前负责人" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.before_owner_user !== "" ? scope.row.before_owner_user: "--"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="负责人" width="100">
                <template slot-scope="scope">
                    <span>{{
              scope.row.owner_user !== "" ? scope.row.owner_user : "--"
            }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="date" label="企业等级"> </el-table-column> -->
            <!-- <el-table-column prop="name" label="联系人数量"> </el-table-column> -->
            <!-- <el-table-column prop="address" label="联系人" show-overflow-tooltip> -->
            <!-- </el-table-column> -->
            <!-- <el-table-column prop="date" label="共享人"> </el-table-column> -->
            <!-- <el-table-column prop="date" label="最近联系记录"> </el-table-column> -->
            <!-- <el-table-column prop="name" label="销售机会"> </el-table-column> -->
            <!-- <el-table-column prop="address" label="创建人" show-overflow-tooltip>
        </el-table-column> -->
            <el-table-column label="创建人" width="100">
                <template slot-scope="scope">
                    <span>{{
              scope.row.create_user !== "" ? scope.row.create_user : "--"
            }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    <span>{{
              scope.row.add_time !== "" ? scope.row.add_time : "--"
            }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <span style="margin-right: 10px">共{{ datanumber }}条</span>
            <!-- <span>当前第{{ searchList.page }}页共有{{ tableData.length }}条</span> -->
            <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
                <i class="el-icon-arrow-left operable" :class="searchList.page == 1 ? 'pageOff' : 'pageOn'" @click="prevPage"></i>
            </span>
            <div style="display: inline; margin: 0 10px">
                <el-input :title="searchList.page" style="width: 60px" v-model="searchList.page" @change="sizechange()" size="mini"></el-input>
                <span style="margin: 0 5px 0 15px">/</span>
                <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
            </div>
            <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
                <i class="el-icon-arrow-right operable" :class="seenumber > datanumber ? 'pageOff' : 'pageOn'" @click="nextPage"></i>
            </span>
            <span style="margin-left: 10px">每页</span>
            <el-select style="width: 70px" v-model="searchList.size" @change="sizechange()" placeholder="请选择" size="mini">
                <el-option v-for="item in sizennList" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
            条
        </div>
    </div>

    <!-- 新增编辑 -->
    <add-enterprise ref="enterpriseForm" :data="data" :start="0"></add-enterprise>
    <!-- 详情 -->
    <details-enterprise ref="detailsEnterprise" :parentdetails="parentdetails" :isreturn="0"></details-enterprise>
</div>
</template>

<script>
import {
    regionData,
    CodeToText
} from "element-china-area-data";
import addEnterprise from "../pageWorld/addEnterprise.vue";
import detailsEnterprise from "../pageWorld/detailsEnterprise.vue"
export default {
    components: {
        addEnterprise,
        detailsEnterprise,
    },
    data() {
        return {
            loading: false,
            // 企业操作
            dialogEditer: false,
            data: [],
            levelList: [],
            sizennList: [{
                value: 20
            }, {
                value: 50
            }, {
                value: 100
            }],
            // 搜索条件
            searchList: {
                page: 1,
                size: "20",
                kw: "",
                level: "",
            },
            datanumber: "0",
            seenumber: "0",
            pagenumber: "0",
            multipleSelection: "",
            ruleForm: {
                id: "",
                name: "",
                phone: "",
                web_site: "",
                email: "",
                industry_id: "",
                scale: "",
                level_id: "",
                area_id: "",
                address: "",
                remark: "",
                long: "",
                lat: "",
            },
            rules: {
                name: [{
                    required: true,
                    message: "请输入企业全称",
                    trigger: "blur"
                }],
            },
            tableData: [],
            detailsData: [],
            parentdetails: "",
        };
    },
    created() {
        this.loading = true;
        this.getlevel();
        this.getData();
    },
    methods: {
        // 获取企业等级
        getlevel() {
            this.$cmsapi.customerLevelList().then(
                (res) => {
                    if (res.code == 0) {
                        this.levelList = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                (err) => {
                    console.log(err);
                }
            );
        },
        // 获取列表数据
        getData() {
            let that = this;
            this.$cmsapi.customerList(this.searchList).then(
                (res) => {
                    if (res.code == 0) {
                        for (let i = 0; i < res.data.length; i++) {
                            for (const key in res.data[i]) {
                                if (!res.data[i][key] && res.data[i][key] !== 0) {
                                    res.data[i][key] = "";
                                }
                            }
                        }
                        that.seenumber = that.searchList.size * that.searchList.page;
                        that.datanumber = res.count;
                        that.pagenumber = Math.ceil(res.count / that.searchList.size);
                        that.tableData = res.data;
                    } else {
                        that.$message.error(res.msg);
                    }
                    that.loading = false;
                },
                (err) => {
                    console.log(err);
                    that.loading = false;
                }
            );
        },
        search() {
            this.loading = true;
            this.getData();
        },
        // 条件重置
        btnRefresh() {
            this.searchList = this.$options.data().searchList;
            this.loading = true;
            this.getData();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 最大条数变化
        sizechange() {
            this.loading = true;
            this.getData();
        },
        //上一页
        prevPage() {
            this.loading = true;
            this.searchList.page -= 1;
            this.getData();
        }, // 下一页
        nextPage() {
            this.loading = true;
            this.searchList.page += 1;
            this.getData();
        },
        // 查看企业详情
        details(obj) {
            this.parentdetails = obj.id;
            this.$refs.detailsEnterprise.cDetails = true;
        },
        // 新增编辑
        showEditer(type) {
            if (type == 0) {
                // 新增
                this.data = this.$options.data().data;
                this.$refs.enterpriseForm.dialogEditer = true;
            } else {
                // 编辑
                this.data = this.detailsData;
                this.$refs.enterpriseForm.dialogEditer = true;
            }
        },
        // 删除
        delForm() {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    this.loading = true;
                    let langT = this.multipleSelection.length - 1;
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        console.log(this.multipleSelection[i].id);
                        this.$cmsapi.customerDel(this.multipleSelection[i].id).then(
                            (res) => {
                                if (res.code !== 0) {
                                    this.$message.error(res.msg);
                                    this.loading = false;
                                    return;
                                }
                                if (i == langT) {
                                    this.$message({
                                        type: "success",
                                        message: "删除成功",
                                    });
                                    this.getData();
                                }
                            },
                            (err) => {
                                console.log(err);
                            }
                        );
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
#addComphone,
#addPhone,
#removePhone {
    cursor: pointer;
}

.form {
    width: 60%;
}
</style>
